<template>
  <div class="add">
    <div id="app">
      <div id="tou">
        <a href="">
          <button class="n" type="primary" plain>公司新闻</button>
        </a>
      </div>
      <template v-if="data">
        <div class="box" v-for="item in data.results" :key="item.nid">
          <img
            v-if="item.nimg"
            :src="`image/${item.nimg}`"
            alt=""
            @error="Move"
          />
          <div>
            <router-link :to="`/wenzhang?nid=${item.nid}`">
              <b id="biaoti"> {{ item.ntitle }}标题 </b>
              <p id="shijian">2022-02-16</p>
              <p id="neirong">
                {{ item.content }}
              </p>
            </router-link>
          </div>
        </div>
      </template>
      <!-- 分页导航 -->
      <template v-if="data">
        <div class="pages">
          <a
            @click.prevent="getData(data.page * 1 - 1)"
            :class="{ default: data.page == 1 }"
          >
            上一页
          </a>
          <a
            @click.prevent="getData(item)"
            href=""
            :class="{ cur: data.page == item }"
            v-for="item in data.pagecount"
            :key="item"
          >
            {{ item }}
          </a>

          <a
            href=""
            @click.prevent="getData(data.page * 1 + 1)"
            :class="{ default: data.page == data.pagecount }"
          >
            下一页
          </a>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,

      pageCount: null,
    };
  },

  //   },
  // },
  methods: {
    getData(page = 1) {
      let url = `http://localhost:3000/news?page=${page}`;
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
        console.log("data", this.data);
      });
      console.log(this);
    },
    Move(e) {
      // let a = e.target;
      // console.log("aaaaa", e.target);
      e.target.src = "http://localhost:8080/image/20211102_1635821487108.jpg";
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped src='../assets/css/yemian.scss'>
.pages {
  user-select: none;

  .default,
  .cur {
    // 不接受鼠标事件
    pointer-events: none;
  }
}
</style>
